{% from "macros/forms.html" import form_input, form_select %}
{% set form_error = form_error | default({}) %}

<script type="text/javascript">

if (typeof htmx !== 'undefined' && htmx.onLoad) {
  htmx.onLoad(function (elt) {
    initChoices('attribute_enum-input', 'attributes');
  });
} else {
    initChoices('attribute_enum-input', 'attributes');
}
</script>

<div class="bg-base-100 p-4">
  <h1 class="text-3xl font-bold mb-5 w-3/4 ml-[10%]">{{ submit_text }}</h1>
  <p class="text-base-content/60 text-[0.7rem] mb-5 w-1/2 ml-[10%]">ID: {{ attribute.id }}</p>
  <form id="attribute-form"
        class="w-3/4 ml-[10%]"
        {{ form_action }}
        hx-swap="innerHTML"
        hx-target="#form-container"
        hx-target-error="#form-container">
    {% include "partials/admin_form_error.html" %}
    {{ form_input('Name', 'name', attribute.name, form_error.name, width="w-3/4") }}
    {{ form_input('Description', 'description', attribute.description, form_error.description, width="w-3/4") }}
    {{ form_input('Default Value', 'default_value', attribute.default_value, form_error.default_value, required=False, width="w-3/4") }}

    <div class="mb-5 w-3/4" x-data="{ showEnum: false }">
      <label class="select w-full">
        <span class="label">Attribute Type</span>
        <select id="type"
                name="type"
                required
                class="validator select w-full"
                x-on:change="showEnum = $event.target.value.toLowerCase() == 'enum'"
                x-on:load="showEnum = '{{ attribute.type | lower }}' == 'enum'">
          {% if not attribute.type %}<option value="" selected disabled>Select an item type</option>{% endif %}
          {% for option in attribute_types -%}
            <option value="{{ option.id }}" {% if attribute.type == option.id %}selected{% endif %}>{{ option.name }}</option>
          {% endfor -%}
        </select>
      </label>

      <div class="w-full mt-5 mb-3" id="attribute_enum" x-cloak x-show="showEnum">
        <div role="alert" class="alert alert-warning">
          {{ heroicon_mini('exclamation-triangle', class='h-5 w-5 flex-shrink-0') }}
          <span>Warning: Creating Attribute Enums is not yet supported</span>
        </div>

        <input disabled type="text" id="attribute_enum-input" name="attribute_enums[]" value="{{ attribute.attribute_enum }}" />
      </div>
    </div>

    <input type="submit" class="btn btn-primary w-3/4" value="{{ submit_text }}" />
  </form>
</div>
